Embedding a Video into HTML- using Flash

Ok- so after a hectic day- and then to come home to a broken air-conditioner, I’m now sitting down to type a blog.  sigh… 

We’ll start with a basic Flash tutorial:

1. Open Flash and create a new flash doc.  Save it in a test file as Video.fla.  (I always create a test file on my desktop while I’m working)

2. Import the video you are wanting to embed- File/Import/Import Video

3. If you do not already have a flv- but have a video that is a different format- click Launch Media Encoder at the bottom of the Import Video Window

4. Once that opens- drag your movie into the window

5. Go to Edit/Export Settings

6. You can now change the start and stop point of your video, the format it is going to save it as, and the width and height. Go to Preset (upper right corner) and click flv/ Click Out Put Name- make sure the new video will be saved in the same folder as your Video.fla and name it Video/ Click ok- and you will be taken back to the main Media Encoder page. Click Start Queue

7. Close the Media Encoder once it is finished- and back on your import video window- hit browse and choose your new Video.flv.  Choose load external video with playback component.

8. Click Next

9. Choose your skin and skin color- we will go through how to create custom skins in a later article

10. Click Next

11. Click Finish

12. Set your stage to the size you want- by clicking the stage- and selecting edit under properties

13. Go to your Component Inspector to choose autoplay(true- it will start once your webpage loads, false will make it so it wont start until someone presses play and is the best option in my opinion- you don’t want to annoy people with a video right off the bat), change the skin and skin color, change the source, etc

14. Now save the fla(ctl+S), and save the swf (ctl+shft+alt+S) as video.swf. Make sure you are saving it in the same folder as the Video.fla and the source movie (Video.flv). This action will automatically save your skin in this location as well

Adding Video.swf to Webpage with HTML

1. Upload source Video- Video.flv, Video.swf file and skin.swf (whatever skin you use) to your website- however you do it. I use filezilla and create a new folder called flash

2. In the body portion of your html page or section- enter the following code (I used the names I gave everything above- if you used a different name- switch it out ).  Everything in the comment tags <!– –> are tips:

“<p><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”460″ height=”345″><!–Set your width and height–>

<param name=”Movie” value=”/Flash/Video.swf”><!– Where your swf is–>

<param name=”base” value=”/Flash”> <!–Tells the browsers where your video player and .flv are –>

<param name=”play” value=”false”><!–Sets autoplay, don’t count on this it should be in your video –>

<param name=”quality” value=”high”>

<param name=”wmode” value=”transparent”><!–If you would like to create a div tag or html above your movie- this will need to be transparent–>

<param name=”loop” value=”false”><!– If you want your video to loop automatically –>

<!–This is the embed code for firefox–><param name=”menu” value=”false”><embed src=”/Flash/video.swf” width=”460″ height=”345″ base=”/Flash” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; quality=”high” wmode=”transparent” loop=”false” menu=”false”></embed></object></p>”